<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录————岑溪购物</title>
    <link rel="icon" href="CX.png" type="image/svg+xml">
    <link rel="stylesheet" href="login.css">
</head>
<body>
    <header>
        <div class="logo">
            <img src="CX.png" alt="">
            <img src="CXCN.png" alt="">
        </div>
        <a href="#">登陆页面-改进建议</a>
    </header>
    <div class="Body">
        <div class="container">
            <div class="scanQR">
                <p>扫码登录</p>
                <span>使用手机“扫一扫”登录</span>
                <img src="images/扫码登录.svg" alt="">
            </div>
            <div class="login">
                <div class="section">
                    <p onclick="usepass()">密码登录</p>
                    <p onclick="messegepass()">短信登录</p>
                </div>
                <div id="use-pass" >
                    <input type="text" placeholder="账号名/手机号/邮箱">
                    <input type="password" placeholder="密码">
                    <button onclick="window.close();">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</button>
                </div>
                <div id="messege-pass" >
                    <input type="text" placeholder="请输入手机号">
                    <input type="text" placeholder="请输入验证码">
                    
                    <!-- 在短信验证码输入框后添加 -->
                    <div id="phone-error" class="error-message"></div>
                    <button onclick="window.close();">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</button>
                </div>
                <script>
                    function usepass(){
                        document.getElementById('messege-pass').style.display = 'none';
                        document.getElementById('use-pass').style.display = 'block';
                        document.querySelectorAll('.section p')[0].classList.add('active');
                        document.querySelectorAll('.section p')[1].classList.remove('active');
                    }
                    function messegepass(){
                        document.getElementById('messege-pass').style.display = 'block';
                        document.getElementById('use-pass').style.display = 'none';
                        document.querySelectorAll('.section p')[0].classList.remove('active');
                        document.querySelectorAll('.section p')[1].classList.add('active');
                    }
                    window.onload = function() {
                        usepass();
                    };
                    
                    function validatePhone(phone) {
                        const phoneError = document.getElementById('phone-error');
                        if (phone.length !== 11) {
                            phoneError.textContent = '请输入11位手机号码';
                            phoneError.style.display = 'block';
                            return false;
                        }
                        phoneError.style.display = 'none';
                        return true;
                    }

                    // 修改短信登录按钮
                    document.querySelector('#messege-pass button').onclick = function() {
                        const phone = document.querySelector('#messege-pass input[type="text"]').value;
                        const code = document.querySelector('#messege-pass input[type="password"]').value;
                        
                        if (validatePhone(phone)) {
                            window.close();
                        }
                    };
                    
                    // 添加输入事件监听
                    document.querySelector('#use-pass input[type="password"]').addEventListener('input', function() {
                        validatePassword(this.value);
                    });
                    
                    document.querySelector('#messege-pass input[type="text"]').addEventListener('input', function() {
                        validatePhone(this.value);
                    });
                    
                    document.querySelector('#use-pass input[type="text"]').addEventListener('input', function() {
                        validatePhone(this.value);
                    });
                </script>
                <div class="login-style">
                    <div class="wxlogin">
                        <img src="images/微信.svg" alt="">
                        <p>微信登录</p>
                    </div>
                    <div class="qqlogin">
                        <img src="images/qq.svg" alt="">
                        <p>QQ登录</p>
                    </div>
                    <a href="">忘记密码</a>
                    <a href="">立即注册</a>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <div class="container">
            <div class="footer">
                <a href="">关于我们</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="">联系我们</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="">人才招聘</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="">商家入驻</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="">广告服务</a>
            </div>
            <p>© 2025 岑溪购物 版权所有</p>
        </div>
    </footer>
</body>
</html>